<template>
  <div>
    <van-skeleton title avatar :row="3" :loading="loading">
      <!-- 搜索 -->
      <van-search
        v-model="value"
        show-action
        label="地址"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <router-link to="/classification">
            <van-icon name="apps-o" style="font-size: 20px" />
          </router-link>
        </template>
      </van-search>
      <!-- tab -->
      <van-tabs v-model:active="active" animated>
        <van-tab title="推荐">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
          </van-swipe>
        </van-tab>
        <van-tab title="美食"> </van-tab>
        <van-tab title="运动"> </van-tab>
        <van-tab title="保健品"> </van-tab>
      </van-tabs>
      <Tabbar></Tabbar>
    </van-skeleton>
  </div>
</template>
<script setup>
//tabbar
import Tabbar from "../components/Tabbar.vue";

//搜索
import { ref, onMounted } from "vue";
import { showToast } from "vant";
const value = ref("");
const onSearch = (val) => showToast(val);
const onClickButton = () => showToast(value.value);

//骨架屏
const loading = ref(true);

onMounted(() => {
  setInterval(() => {
    loading.value = false;
  }, 1000);
});
</script>
<style lang='scss' scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
a {
  color: #000;
}
</style>